<template>
    <div class="header" @click="goBack">
        <van-icon name="arrow-left" style="margin:0 .3rem 0 0;" />回到上一页
    </div>

    <!-- 订单列表切换，开始 -->
    <van-tabs v-model:active="activeValue" swipeable> 
        <van-tab title="全部">
            <orderItem />
        </van-tab>
        <van-tab title="待付款">待付款</van-tab>
        <van-tab title="待收货">待收货</van-tab>
        <van-tab title="已完成">已完成</van-tab>
    </van-tabs>
    <!-- 订单列表切换，结束 -->
</template>
<script setup>
import { ref } from 'vue';
import orderItem from './orderItem'
import { useRouter } from 'vue-router';

// 订单切换的索引
const activeValue = ref(0);

const router = useRouter()
// 返回到上一页
const goBack = () => {
    router.push({
        path: '/personal'
    })
}

</script>


<style lang="less" scoped>
.header {
    margin: 0 .5rem;
    height: 1rem;
    padding: .2rem 0;
    text-align: left;
    font-size: .4rem;
}
</style>
